<template>
	<sc-water-mark ref="wm" :text="$TOOL.data.get('SY_TEXT')" :subtext="$TOOL.data.get('SY_SUBTEXT')">
		<el-container>
			<el-main>
				<el-row>
					<el-col :span="4">
						<el-input v-model="search.usc_code" placeholder="统一信用代码" clearable></el-input>
					</el-col>
					<el-col :span="4">
						<el-input v-model="search.org_name" placeholder="社会组织名称" clearable></el-input>
					</el-col>
					<el-col :span="3">
						<el-button type="primary" icon="el-icon-search" @click="getData"></el-button>
						<el-button type="primary" @click="printInfo">打印</el-button>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="5"></el-col>
					<el-col :span="12" :offset="6">
						<div class="common-layout" ref="dataInfo">
							<el-container>
								<el-header>登记系统信息</el-header>
								<el-main>
									<el-form :model="form" label-width="140px">
										<el-form-item label="唯一社会信用代码">
											<el-input disabled v-model="form.USC_CODE"/>
										</el-form-item>
										<el-form-item label="社会组织名称">
											<el-input disabled v-model="form.ORG_NAME"/>
										</el-form-item>
										<el-form-item label="法定代表人姓名">
											<el-input disabled v-model="form.LEGAL_NAME"/>
										</el-form-item>
										<el-form-item label="注册地址">
											<el-input disabled v-model="form.DOMICILE_ADDRES"/>
										</el-form-item>
										<el-form-item label="社会组织登记日期">
											<el-input disabled v-model="form.REGISTRATION_DATE"/>
										</el-form-item>
										<el-form-item label="类型">
											<el-input disabled v-model="form.ORG_TYPE"/>
										</el-form-item>
										<el-form-item label="查询结果条数">
											<el-input disabled v-model="form.RN"/>
										</el-form-item>
									</el-form>
								</el-main>
							</el-container>
						</div>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
	</sc-water-mark>
</template>

<script setup>
	/* eslint-disable */
	import {reactive, ref} from 'vue'
	import {getShzzxx} from '@/api/model/jkdy'
	import {onMounted} from "@vue/runtime-core"
	import print from '@/utils/print'

	const dataInfo = ref()
	const form = reactive({})
	const search = reactive({
		usc_code: "52110000600072390J",
		org_name: "老甲艺术馆",
	})

	const getData = async () => {
		let param = {
			access_key: 'AH34',
			format: 'json',
			request_id: '',
			sign: 'aaaa',
			timestamp: '1535869598000',
			version: '',
		};
		param.biz_content = JSON.stringify(search)
		await getShzzxx(param).then((res) => {
			let data = res.biz_data.rows[0]
			if (!data) {
				Object.keys(form).forEach((k) => {
					form[k] = '';
				})
				return;
			}
			Object.keys(data).forEach((k) => {
				form[k] = data[k];
			})
			form.RN = res.biz_data.returncount;
			// console.log(JSON.stringify(res))
		}).catch((err) => {
			console.log(err)
		})
	}
	const printInfo = () => {
		//直接传入REF或者querySelector
		print(dataInfo.value)
	}
	onMounted(() => {
		getData()
	})
</script>

<style lang="scss">
	.common-layout {
		text-align: center;

		.el-header {
			text-align: center;
			display: block;
			font-size: 26px;
		}
	}

	.el-row {
		margin-bottom: 20px;
	}

	.el-row:last-child {
		margin-bottom: 0;
	}

	.el-col {
		border-radius: 4px;
		margin: 0 10px;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.ep-bg-purple {
		background-color: #D3DCE6;
	}

	.ep-bg-purple-light {
		background-color: #E5E9F2;
	}

	.el-main:nth-child(2) {

		background-color: white;
	}

	.el-form-item {
		display: flex;
	}

	.el-form-item__label {
		/*display: inline-block;*/
		/*text-align-last: justify;*/
	}

	.el-form-item__content {
		width: 250px;
		display: inline-block;
	}
</style>
